<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>楚地灵韵 - 首页</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <!-- 头部 -->
        <header class="app-header">
            <div class="header-content">
                <div class="logo">楚地灵韵</div>
                <div class="header-icons">
                    <a href="#" class="icon-button"><i class="fas fa-bell"></i></a>
                    <a href="#" class="icon-button"><i class="fas fa-user"></i></a>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="app-content">
            <!-- 搜索栏 -->
            <div class="search-container">
                <div class="search-bar">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索景点、非遗、活动...">
                </div>
            </div>

            <!-- 轮播图 -->
            <div class="carousel">
                <div class="carousel-item active">
                    <img src="https://picsum.photos/id/1018/800/400" alt="景点图片">
                    <div class="carousel-caption">
                        <h3>黄鹤楼AR体验</h3>
                        <p>穿越千年，与黄鹤楼的传说互动</p>
                    </div>
                </div>
                <div class="carousel-dots">
                    <span class="dot active"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>
            </div>

            <!-- 功能模块 -->
            <div class="feature-modules">
                <div class="module-title">
                    <h2>体验模式</h2>
                </div>
                <div class="modules-grid">
                    <a href="ar_guide.html" class="module-card">
                        <div class="module-icon">
                            <i class="fas fa-map-marked-alt"></i>
                        </div>
                        <div class="module-name">AR导览</div>
                    </a>
                    <a href="spirits.html" class="module-card">
                        <div class="module-icon">
                            <i class="fas fa-dragon"></i>
                        </div>
                        <div class="module-name">楚地精灵</div>
                    </a>
                    <a href="cultural_heritage.html" class="module-card">
                        <div class="module-icon">
                            <i class="fas fa-theater-masks"></i>
                        </div>
                        <div class="module-name">非遗文化</div>
                    </a>
                    <a href="#" class="module-card">
                        <div class="module-icon">
                            <i class="fas fa-gamepad"></i>
                        </div>
                        <div class="module-name">互动游戏</div>
                    </a>
                </div>
            </div>

            <!-- 推荐景点 -->
            <div class="recommendation-section">
                <div class="section-header">
                    <h2>热门景点</h2>
                    <a href="#" class="view-all">查看全部 <i class="fas fa-chevron-right"></i></a>
                </div>
                <div class="scroll-cards">
                    <div class="spot-card">
                        <div class="card-image">
                            <img src="https://picsum.photos/id/1036/300/200" alt="黄鹤楼">
                            <div class="card-badge"><i class="fas fa-star"></i> 4.9</div>
                        </div>
                        <div class="card-info">
                            <h3>黄鹤楼</h3>
                            <p class="location"><i class="fas fa-map-marker-alt"></i> 武汉市武昌区</p>
                            <div class="tags">
                                <span class="tag">历史名胜</span>
                                <span class="tag">AR导览</span>
                            </div>
                        </div>
                    </div>
                    <div class="spot-card">
                        <div class="card-image">
                            <img src="https://picsum.photos/id/1061/300/200" alt="东湖">
                            <div class="card-badge"><i class="fas fa-star"></i> 4.7</div>
                        </div>
                        <div class="card-info">
                            <h3>东湖景区</h3>
                            <p class="location"><i class="fas fa-map-marker-alt"></i> 武汉市武昌区</p>
                            <div class="tags">
                                <span class="tag">自然风光</span>
                                <span class="tag">精灵探索</span>
                            </div>
                        </div>
                    </div>
                    <div class="spot-card">
                        <div class="card-image">
                            <img src="https://picsum.photos/id/1039/300/200" alt="古琴台">
                            <div class="card-badge"><i class="fas fa-star"></i> 4.6</div>
                        </div>
                        <div class="card-info">
                            <h3>古琴台</h3>
                            <p class="location"><i class="fas fa-map-marker-alt"></i> 武汉市汉阳区</p>
                            <div class="tags">
                                <span class="tag">文化遗址</span>
                                <span class="tag">AR演奏</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近活动 -->
            <div class="recommendation-section">
                <div class="section-header">
                    <h2>文化活动</h2>
                    <a href="#" class="view-all">查看全部 <i class="fas fa-chevron-right"></i></a>
                </div>
                <div class="activity-list">
                    <div class="activity-card">
                        <div class="activity-time">
                            <div class="date">5月</div>
                            <div class="day">21</div>
                        </div>
                        <div class="activity-details">
                            <h3>楚文化AR体验展</h3>
                            <p class="activity-location"><i class="fas fa-map-marker-alt"></i> 湖北省博物馆</p>
                            <p class="activity-description">通过AR技术重现荆楚文化古代场景，体验楚国工艺制作</p>
                        </div>
                        <div class="activity-action">
                            <button class="btn btn-primary">预约</button>
                        </div>
                    </div>
                    <div class="activity-card">
                        <div class="activity-time">
                            <div class="date">6月</div>
                            <div class="day">03</div>
                        </div>
                        <div class="activity-details">
                            <h3>端午节龙舟AR互动</h3>
                            <p class="activity-location"><i class="fas fa-map-marker-alt"></i> 东湖景区</p>
                            <p class="activity-description">使用APP参与虚拟龙舟比赛，探索端午节的文化渊源</p>
                        </div>
                        <div class="activity-action">
                            <button class="btn btn-primary">预约</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最新解锁的精灵 -->
            <div class="recommendation-section">
                <div class="section-header">
                    <h2>楚地精灵</h2>
                    <a href="spirits.html" class="view-all">查看全部 <i class="fas fa-chevron-right"></i></a>
                </div>
                <div class="spirit-collection">
                    <div class="spirit-avatar">
                        <img src="https://picsum.photos/id/237/100/100" alt="精灵-青龙">
                        <div class="spirit-name">青龙</div>
                    </div>
                    <div class="spirit-avatar">
                        <img src="https://picsum.photos/id/238/100/100" alt="精灵-白虎">
                        <div class="spirit-name">白虎</div>
                    </div>
                    <div class="spirit-avatar">
                        <img src="https://picsum.photos/id/239/100/100" alt="精灵-朱雀">
                        <div class="spirit-name">朱雀</div>
                    </div>
                    <div class="spirit-avatar locked">
                        <img src="https://picsum.photos/id/248/100/100" alt="未解锁">
                        <div class="spirit-name">???</div>
                    </div>
                    <div class="spirit-avatar locked">
                        <img src="https://picsum.photos/id/249/100/100" alt="未解锁">
                        <div class="spirit-name">???</div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <a href="home.html" class="nav-item active">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="ar_guide.html" class="nav-item">
                <i class="fas fa-map-marked-alt"></i>
                <span>导览</span>
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-camera"></i>
                <span>扫描</span>
            </a>
            <a href="spirits.html" class="nav-item">
                <i class="fas fa-dragon"></i>
                <span>精灵</span>
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <!-- 浮动AR扫描按钮 -->
    <div class="fab">
        <i class="fas fa-camera"></i>
    </div>
</body>
</html> 